<template>
  <transition
    enter-active-class="animated fadeIn"
    leave-active-class="animated fadeOut"
  >
    <div class="slide-content-wrapper" v-show="menuVisible && settingVisible === 3">
<!--      动画迭代效果，增加体验感-->
      <transition
        enter-active-class="animated slideInLeft"
        leave-active-class="animated slideOutLeft"
      >
        <div class="content" v-if="settingVisible === 3">
          <div class="content-page-wrapper" v-if="bookAvailable">
            <div class="content-page">
<!--               动态组件机制-->
              <component :is="currentTab === 1 ? content : bookmark"></component>
            </div>
            <div class="content-page-tab">
              <div class="content-page-tab-item" @click="selectTab(1)" :class="{'selected': currentTab === 1}">{{$t('book.navigation')}}</div>
              <div class="content-page-tab-item" @click="selectTab(2)" :class="{'selected': currentTab === 2}">{{$t('book.bookmark')}}</div>
            </div>
          </div>
          <div class="content-empty" v-else>
            <ebook-loading></ebook-loading>
          </div>
        </div>
      </transition>
      <div class="content-bg" @click="hideTitleAndMenu"></div>
    </div>
  </transition>
</template>

<script>
import { ebookMixin } from '../../utils/mixin'
import EbookSlideContents from './EbookSlideContents'
import EbookLoading from './EbookLoading'
import EbookSlideBookmark from './EbookSlideBookmark'

export default {
  name: 'EbookSlide',
  components: { EbookLoading },
  mixins: [ebookMixin],
  data () {
    return {
      currentTab: 1,
      content: EbookSlideContents,
      bookmark: EbookSlideBookmark
    }
  },
  methods: {
    selectTab (tab) {
      this.currentTab = tab
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import '../../assets/styles/global.styl'
  .slide-content-wrapper
    position: absolute
    top: 0
    left: 0
    z-index: 300
    width: 100%
    height: 100%
    display: flex
    .content
      flex: 0 0 85%
      width: 85%
      height: 100%
      .content-empty
        width: 100%
        height: 100%
        center()
      .content-page-wrapper
        width: 100%
        height: 100%
        display: flex
        // 垂直布局
        flex-direction: column
        .content-page
          flex: 1
          width: 100%
          overflow: hidden
        .content-page-tab
          display: flex
          flex: 0 0 px2rem(48)
          width: 100%
          height: px2rem(48)
          .content-page-tab-item
            flex: 1
            font-size: px2rem(12)
            center()
    .content-bg
      flex: 0 0 15%
      width: 15%
      height: 100%
</style>
